/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {Form, Popconfirm, Table, Tabs} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import DescGroup from "../../../components/DescriptionGroup";
import ViewTitle from "../../../components/ViewTitle";
import {ModalView} from "antd-extra";
import ModalCreateInboundLot from "./ModalCreateInboundLot";
import styles from "../../index.less";
import ModalInboundLotDetail from "./ModalInboundLotDetail";
import procure from "../../../models/procure";

moment.locale('zh-cn');
const table = 'InboundOrder';
const {TabPane} = Tabs;
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            material, procure,
            store
          }) => ({...user, ...material, ...dynamicLabel, ...global, ...procure, ...store}))
export default class ModalInboundOrderDetail extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const {values} = this.props;
    const {code} = values;
    console.log('procure code', values);
    this.props.dispatch({
      type: 'procure/findOne',
      payload: {code}
    });

    this.onDataLoad().then(res => {
      this.setState(res);
    });
  }

  async onDataLoad() {
    const {values} = this.props;
    const {code} = values;
    const lotRes = await this.props.dispatch({
      type: 'store/findInboundLots',
      payload: {orderCode: code}
    });

    return {lots: lotRes.result};
  }

  onDelete = record => {
    const {lotCode} = record;
    this.props.dispatch({
      type: 'store/deleteInboundLot',
      payload: {lotCode}
    }).then(res => {
      this.requestReturn(res);
      this.componentDidMount();
    });
  };

  lotCols = () => {
    const temp = this.getInboundLotCols();
    temp.push({
      title: '操作', dataIndex: 'operation', key: 'operation',
      width: 120, fixed: 'right',
      render: (value, record) => {
        return (
          <span>
           {<a style={{marginRight: '6px'}}
               onClick={() => this.onInboundLotDetail(record)}>详情</a>}
            {
              <Popconfirm
                title="确认删除"
                onConfirm={() => this.onDelete(record)}
                okText="是"
                cancelText="否"
              >
                <a>删除</a>
              </Popconfirm>
            }
            </span>
        );
      }
    });
    return temp;
  };
  onInboundLotDetail = values => {
    ModalView.open(ModalInboundLotDetail, {
      title: '入库记录详情',
      width: '920px',
      maskClosable: false
    }, {
      values
    });
  };
  cols = () => {
    const {procureOrder = {}} = this.props;
    const {division} = procureOrder;
    return [
      {title: "物料名称", key: "name", dataIndex: "name"},
      {title: "物料编码", key: "code", dataIndex: "code"},
      {title: "物料规格", key: "spec", dataIndex: "spec"},
      {title: "物料类型", key: "type", dataIndex: "type"},
      {title: "物料编号", key: "number", dataIndex: "number"},
      {title: "采购数量", key: "count", dataIndex: "count"},
      {title: "入库数量", key: "inboundCount", dataIndex: "inboundCount"},
      {
        title: "操作", key: "opt", dataIndex: "opt", render: (value, record) => {
          console.log('rrrrr', record);
          return <a style={{marginRight: '6px'}}
                    onClick={() => {
                      const {values = {}} = this.props;
                      const {orderCode, code, vendor, vendorCode} = values;

                      ModalView.open(ModalCreateInboundLot, {
                        title: '创建入库记录',
                        width: '1080px'
                      }, {
                        values: record,
                        callback: lot => {
                          lot.orderCode = orderCode;
                          lot.inboundOrderCode = code;
                          lot.vendor = vendor;
                          lot.vendorCode = vendorCode;
                          lot.code = record.code;
                          lot.price = record.price;
                          lot.material = record.name;
                          lot.division=division;
                          this.props.dispatch({
                            type: 'store/createInboundLot',
                            payload: lot
                          }).then(res => {
                            this.requestReturn(res);
                            this.componentDidMount();
                          });
                        }
                      });
                    }}>入库</a>;
        }
      }
    ];
  };

  render() {
    const {style, cols = 3, procureOrder = {}} = this.props;
    console.log('procureOrderrr', procureOrder);
    const model = this.props[`${table}Model`];
    if (!model) return;

    const {lots} = this.state;
    const {materials} = procureOrder;
    console.log('lotss', lots);
    let allInboundCount = 0;
    _.map(materials, item => {
      const {code} = item;
      const temp = _.filter(lots, it => it.code === code);

      let _inboundCount = 0;
      if (temp) {
        _.map(temp, lot => {
          const {lotCount} = lot;
          _inboundCount += lotCount;
          allInboundCount += lotCount;
        });
      }
      item.inboundCount = _inboundCount;
    });

    procureOrder.inboundCount = allInboundCount;
    const _labels = _.filter(model, (item, key) => {
      if (key !== 'labels' && _.includes(item.enableArea, 'detail')) {
        item.key = key;
        return item;
      }
    });
    _.map(_labels, item => {
      const {_type, key} = item;
      if (_type.toLowerCase() === 'switch') {
        procureOrder[key] = procureOrder[key] ? "是" : "否";
      }
      if (_type.toLowerCase() === 'date') {
        procureOrder[key] = procureOrder[key] ? moment(procureOrder[key]).format('YYYY-MM-DD') : '';
      }
    });
    return (<div>
        <Tabs defaultActiveKey="1">
          <TabPane tab="采购单" key="1">
            <Form style={{...style}}>
              <ViewTitle
                title={'采购单信息'}
                level={1}
              ></ViewTitle>
              <DescGroup
                {...{
                  labels: _labels,
                  values: procureOrder,
                  size: 'default',
                  column: cols
                }}
              ></DescGroup>

              <ViewTitle title={`物料列表`}
                         level={1}

              ></ViewTitle>
              <Table
                className={styles.antTable}
                bordered={true}
                columns={this.cols()}
                dataSource={materials}
                scroll={{x: true}}
                pagination={{pageSize: 100}}
                //scroll={{ x: 1300 }}
              ></Table>
            </Form>

          </TabPane>
          <TabPane tab="入库记录" key="2">
            <ViewTitle title={`入库记录列表`}
                       level={1}
            ></ViewTitle>
            <Table
              className={styles.antTable}
              bordered={true}
              columns={this.lotCols()}
              dataSource={lots}
              scroll={{x: true}}
              pagination={{pageSize: 100}}
              //scroll={{ x: 1300 }}
            ></Table>
          </TabPane>
        </Tabs>
      </div>

    );
  }
}

